<template>
  <Table :columns="columns" :data="data"></Table>
</template>
<script>
  export default {
    data () {
      return {
        columns: [
          {
            title: '编号',
            type: 'index',
            width: 100,
            align: 'center'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '负责的项目',
            key: 'item_in_charge',
            render: (h, params) => {
              if (params.row.item_in_charge == null) {
                return h("span", "无报名项目"); //包装到span标签里返回
              } else {
                return h(
                  "ul",
                  {
                    style: {
                      listStyle: "none",
                      padding: 0,
                      margin: 0
                    }
                  },
                  JSON.parse(params.row.item_in_charge).map((item, index) => {
                    return h("li", item);
                  })
                );
              }
            }
          }
        ],
        data: [
        ]
      }
    },
    //组件挂在的时候获取数据
    mounted () {
      this.$axios.get('/user/getRefereeInfo')
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data
          }
        })
        .catch(err => {
          console.error(err);
        })
    },
  }
</script>
